<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 头部搜索栏 -->
      <el-col :span="21">
        <div class="grid-content bg-purple">
          <el-form ref="form"  label-width="80px">
            <el-form-item label="关键字" >
              <el-input v-model="keyword" style="width:300px"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple-light">
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="getRandoms">筛选</el-button>
        </div>
      </el-col>
      <!-- 总条数提示栏 -->
      <el-alert
        type="info"
        show-icon
        :closable='false'>
        数据一共{{counts}}条
      </el-alert>
      <!-- 表格 -->
      <el-table
        :data="questionsList"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="180">
        </el-table-column>
        <el-table-column
          label="题目编号">
        <template #default='{row}'>
          <div class="questionIDs" v-for="i in row.questionIDs" :key="i.number" @click="getDetail(i)">
            {{i.number}}
          </div>
        </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间">
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)">
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="录入人">
        </el-table-column>
        <el-table-column
          label="操作" width='100px'>
          <template #default='{row}'>
            <el-button type="danger" icon="el-icon-delete" circle @click="delQuestionsList(row.id)" ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="questionsListRequest.page"
      :page-sizes="[3, 5, 10, 20]"
      :page-size="questionsListRequest.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="counts"
      >
      </el-pagination>
      <!-- 弹出框 -->
      <el-dialog
        title="题目预览"
        :visible.sync="dialogVisible"
        width="70%"
        @close='closeDialog'>
        <el-row :gutter="24">
          <el-col :span="6"><div class="grid-content bg-purple">【题型】: {{questionType}} </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【编号】: {{questionDetails.id}} </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【难度】: {{difficulty}} </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【标签】:{{questionDetails.tags}}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【学科】: {{questionDetails.subjectName}} </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【目录】: {{questionDetails.catalogID}} </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">【方向】: {{questionDetails.direction}}  </div></el-col>
        </el-row>
        <hr>
        <p>【题干】:</p>
        <span style="color:blue" v-html="questionDetails.question" ></span>
        <!-- <p>单选题 选项:(以下选中的选项为正确答案)</p> -->
        <div v-if="+questionDetails.questionType === 1">
          <p>单选题 选项: (以下选中的项为正确答案)</p>
          <ul>
            <li v-for="item in questionDetails.options" :key="item.id"><el-radio v-model="item.code" :label="item.isRight === 1? item.code : ''"> {{item.title}} </el-radio></li>
          </ul>
        </div>
        <div v-else-if="+questionDetails.questionType === 2">
          <p>多选题 选项: (以下选中的项为正确答案)</p>
          <div v-for="item in questionDetails.options" :key="item.id">
            <el-checkbox v-model="item.code" :checked="item.isRight === 1? true : false" > {{item.title}}</el-checkbox>
          </div>
        </div>
        <hr>
        <div>【参考答案】: <el-button type="danger" @click="flag=true">视频答案预览</el-button></div>
        <video v-if="flag" :src="questionDetails.videoURL" style="marginTop:20px" height="200px" width="400px" muted controls></video>
        <hr>
        <div style="display:flex;alignItems:center">【答案解析】:  <span v-html="questionDetails.answer"></span></div>
        <hr>
        <div style="display:flex;alignItems:center">【题目备注】:  <span v-html="questionDetails.remarks"></span></div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog" type="primary">关闭</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'Questions-randoms',
  data () {
    return {
      questionsListRequest: {
        page: 1,
        pagesize: 20
      },
      keyword: '',
      counts: 0,
      questionsList: [],
      dialogVisible: false,
      radio: '1',
      questionDetails: {},
      questionType: '',
      difficulty: '',
      flag: false
    }
  },
  methods: {
    // 清除关键词搜索栏
    resetForm () {
      this.keyword = ''
      this.$refs.form.resetFields()
    },
    // 获取组题列表
    async getRandoms () {
      this.questionsListRequest.keyword = this.keyword
      // console.log(this.questionsListRequest)
      const { status, data } = await randoms(this.questionsListRequest)
      if (status === 200) {
        this.counts = data.counts
        data.items.forEach(item => {
          questionType.forEach(i => {
            if (+item.questionType === i.value) {
              item.questionType = i.label
            }
          })
        })
        this.questionsList = data.items
      }
    },
    // 删除所选题目
    delQuestionsList (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        const obj = {
          id
        }
        console.log(id)
        const res = await removeRandoms(obj)
        console.log(res)
        if (res.status === 200) {
          if (this.questionsList.length <= 1) {
            this.questionsListRequest.page--
          }
          if (this.questionsList.length <= 1 && this.questionsListRequest.page === 1) {
            this.questionsListRequest.page = 1
          }
          this.getRandoms()
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 基础题库详情
    async getDetail (id) {
      console.log(id)
      this.dialogVisible = true
      const { status, data } = await detail(id)
      console.log(status, data)
      this.questionDetails = data
      this.questionType = questionType.find(item => item.value === +data.questionType).label
      this.difficulty = difficulty.find(item => item.value === +data.difficulty).label
    },
    // 分页
    // 页数改变触发
    handleCurrentChange (page) {
      // console.log(page)
      this.questionsListRequest.page = page
      console.log(this.questionsListRequest.page)
    },
    // 每页数量改变触发
    handleSizeChange (pagesize) {
      this.questionsListRequest.page = 1
      this.questionsListRequest.pagesize = pagesize
      console.log(this.questionsListRequest.pagesize)
    },
    // 关闭对话框
    closeDialog () {
      this.dialogVisible = false
      this.flag = false
    }
  },
  // 监听器监听页数变化
  watch: {
    questionsListRequest: {
      deep: true,
      immediate: true,
      handler (newValue) {
        this.getRandoms()
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.box-card {
  margin: 0 20px;
}
.bg-purple-light {
  display: flex;
  justify-content: flex-end;
}
.el-table {
  margin-top: 20px;
}
.questionIDs{
  color:  skyblue;
  cursor: pointer;
}
ul {
  padding: 0;
  list-style: none;
}
</style>
